<template>
<div>
  <el-row style="height: 4vh;width: 100%;display: flex;flex-direction: row">
    <span class="left">
    <strong>设备：{{id}}共有{{this.total}}条报警信息</strong>
    </span>

  </el-row>


  <el-row style="height: 38vh;width: 100%;">

    <el-col :span="24" style="height: 100%;">
      <el-table style="margin-top: 1%;"height="95%" :data="staticsTable" :header-cell-style="{backgroundColor:'#D1DAEA',color:'black',fontWeight:'blod'}" :cell-style="staticsTableStyle" size="mini">
        <el-table-column prop="id" :index="indexMethod" type="index" label="序号"> </el-table-column>
        <el-table-column prop="abnormalTemperature" label="异常温度值">  </el-table-column>
        <el-table-column prop="date" label="异常日期" >
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              {{ scope.row.date }}
              <div slot="reference" class="name-wrapper">
                <el-button  type="text"  style="text-decoration: underline; color: #606266"
                            @click="gotoDetail"  >{{ scope.row.date }}
                </el-button>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="time" label="异常时间"></el-table-column>
      </el-table>

    </el-col>

  </el-row>

  <el-row style="height: 38vh;width: 100%;">
        <div id="top" style="width: 100%;height: 400px;margin-top: 1%"></div>
  </el-row>


</div>

</template>

<script>

import * as echarts from 'echarts'
import {zhexianData}from '../../../../api/dianqigui/data-engine'
import { WarningDataList,TableDataList } from '../../../../api/dianqigui/data-warning'
import { serachDataCloudList } from '../../../../api/dianqigui/data-cloud'
export default {
  name: "detail",
  props: {
    id: {
      type: String,
      default: ''
    }
  },
  data(){
    return {
      total:'',
      lineX:[],
      lineY:[],
      date:"",
      matchResult: { } ,
      staticsTable:[],
      option:{},
      myChart:{}
    };
  },
  created(){
    this.searchData()
  },
  mounted() {

    setTimeout(()=>{
      this.topShow()
    },1000)

  },
  methods:{
    indexMethod(index){
      return index+1
    },
    async searchData() {
      const res = await serachDataCloudList(0,50)
      const list = res.data.list
      for (let i = 0; i < list.length; i++) {
        if (list[i].id == this.id) {
          this.matchResult = list[i]
        }
      }

      const res1 = await zhexianData(this.matchResult.f011)
      const list1 = res1.data.list
      //console.log(list2.length)
      for(let i=0;i<list1.length;i++){
        this.lineX[i]=list1[i].time.slice(6,8)+":"+list1[i].time.slice(8,10)
        this.lineY[i]=parseFloat(list1[i].temperatue)

      }

      const res2 = await TableDataList(this.matchResult.f011)
      const list2=res2.data.list
      this.total=list2.length

      for(let i in list2){
        list2[i].date=list2[i].date.slice(3,4)+'-'+list2[i].date.slice(4,6)
        list2[i].time=list2[i].time.slice(0,2)+":"+list2[i].time.slice(2,4)
        this.staticsTable.push(list2[i])
      }
    },
    gotoDetail() {
      this.topShow();
    },
    staticsTableStyle:function ({rowIndex}){
      if(rowIndex%2==1){
        return "background:#D1DAEA"
      }
    },
    topShow: function () {
      this.myChart = echarts.init(document.getElementById('top'));
      this.option= {
        title: {
          text: '设备温度变化曲线',
        },
        tooltip: {
          trigger: 'axis'
        },

        xAxis: {
          name:"时间",
          type: 'category',
          boundaryGap: false,
          data: this.lineX
        },
        yAxis: {
          name:"温度",
          type: 'value',
          axisLabel: {
            formatter: '{value} °C'
          }
        },
        series: [
          {
            name: '温度',
            type: 'line',
            data: this.lineY,
            markPoint: {
              data: [
                {type: 'max', name: '最大值'},
                {type: 'min', name: '最小值'}
              ]
            },
            markLine: {
              data: [
                {type: 'average', name: '平均值'},
                {type: 'max', name: '最大值'},
                {type: 'min', name: '最小值'}
              ]
            }
          },
        ]
      };
      this.myChart.setOption(this.option);
    } ,

  }

}
</script>

<style scoped>
.left{
  letter-spacing:5px;
  background-image:-webkit-linear-gradient(bottom,#2451d6,#234875,#2ba4ca);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  font-size: 20px;
}
.right{
  letter-spacing:2px;
  background-image:-webkit-linear-gradient(bottom,#2451d6,#234875,#2ba4ca);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  font-size: 20px;
  margin-left: auto;
  margin-right: 10px;
}

</style>
